Mogo HTML

Premium HTML 5 website

  • Created: October 2016.
  • By: themetony - Envato author Profile

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our support forum http://support.ethemeuk.com/. Thank you very much!

Mogo HTML is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript.

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 3 folders.

Here they are, sorted alphabetically:

  1. Documentation - Documentation for Mogo HTML site template
  2. HTML - Main folder for template
  3. PSD - Design source files

HTML folder structure:

  • /HTML
    • /css (Template CSS)
    • /scss (Template Sass)
    • /fonts (Font Awesome)
    • /js (Template initialization js)
    • /ajax (Test ajax)
    • /images (All Images)
    • /media (All Media)
    • /vendor (All Plugins)

CONTENT

Content divided on pages:

  • index.html, index-02.html, index-03.html, index-04.html, index-05.html, index-06.html, index-07.html, index-08.html, index-09.html, index-10.html, index-11.html, index-12.html - Home pages
  • listing.html, listing-big-reviews.html, listing-catalogue.html, listing-collections.html, listing-fullwidth.html, listing-right-sidebar.html, listing-with-custom-html-block.html, listing-without-columns.html, listing-with-sidebar.html - Listing pages
  • product.html, product-grouped.html, product-on-sale.html, product-out-of-stock.html, product-simple-variant-1.html, product-simple-variant-2.html, product-variable.html - Product info pages
  • cart-01.html, cart-02.html - Cart pages
  • checkout-01.html, checkout-02.html - Checkout pages
  • compare.html - Products compare page
  • wishlist.html - Wishlist page
  • gallery.html, gallery-3-thumbs.html, gallery-4-thumbs.html, gallery-masonry.html - Gallery pages
  • blog-gallery-post.html, blog-grid.html, blog-listing-without-sidebar.html, blog-listing-with-sidebar.html, blog-masonry.html, blog-standart-post.html, blog-text-post.html, blog-video-post.html - Blog content pages
  • my-account.html, login.html, register.html - User pages
  • contacts.html, sitemap.html, services.html, about.html, faq.html, coming-soon.html - Other pages
  • 404.html, empty-category.html, empty-compare.html, empty-search.html, empty-shopping-cart.html, empty-wishlist.html - Empty pages

HTML Structure

Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

    <!DOCTYPE html>
        <html lang="en">
            ...
        </html>

The default Bootstrap grid system utilizes 12 columns.

For a simple two column layout, create a .row and add the appropriate number of .col-lg-* columns. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

    <div class="row">
        <div class="col-lg-4">...</div>
        <div class="col-lg-8">...</div>
    </div>

Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.

Move columns to the right using .col-lg-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.

    <div class="row">
            <div class="col-lg-4">...</div>
            <div class="col-lg-4 col-lg-offset-2">...</div>
        </div>

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Files

Css file located at css folder.

  • style.css - Theme main CSS file.

Sass(Scss) Files

All Sass(Scss) files located at scss folder.

  • style.scss - Theme main sass file.
  • general/_variables.scss - Variables sass file.
  • general/_mixin.scss - Mixins sass file.
  • general/_animation.scss - Animations sass file.
  • general/_modifiers.scss - Modifiers sass file.
  • general/_typography.scss - Typography sass file.
  • general/_rtl.scss - RTL sass file.
  • blocks/ - Blocks sass folder
  • pages/ - Pages sass folder
  • colorize/ - Colorize sass folder
  • animation/ - Animation sass folder
  • font/ - Fonts sass folder

JavaScript

All JS files located at js folder.

  • js/app.js - Theme main JS file.
  • vendor/ - vendor plugins JS files

Changing Plugins Options

You can change plugins options in the file js/main.js.

For example, you can change any carousel options:

                    $('.brand-carousel').owlCarousel({
                       items : 6,
                       pagination: true,
                       itemsCustom : false,
                       itemsDesktop : false,
                       itemsDesktopSmall : false,
                       itemsTablet: [768,3],
                       itemsTabletSmall: false,
                       itemsMobile : false
                   });
                  

and other.

If you need more information, please visit plugins official sites.

Icons

FlatIcons is a free @font-face iconset. You can see all demo icons in file fonts/font-icon/demo.html.
Use the icon class on "display:inline" elements:

          ...
          <i class="icon-stack"></i>
            ...
        
or
          ...
          <span class="icon-plus"></span>
            ...
        

Fonts

To change the custom font, please take a look in the Mogo.css:
  /* Google font */
  
To change fonts, go to http://www.google.com/webfonts, choose new fonts and use the generated code.

PSD Files

Design source files located at PSD folder.

Sources and Credits

We have used the following files as listed.


Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with "Mogo HTML - site template" please go to your downloads section on ThemeForest.net and rate Mogo HTML with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy in Mogo HTML as much as I've enjoyed designing this template.

Kind Regards,
themetony